import React, { useEffect, useState } from "react"

import { SFormItem } from "@/components/common"
import StyleSelect from "@/components/common/styleSelect"
import { useApi } from "@/hooks"
import { useLocale } from "@/locales"

export default function AgentLevelSelect({ rules, disable, labelProps, selectorProps }: any) {
	const [dataResponse, setDataResponse] = useState<any[]>([])
	const { formatMessage } = useLocale()

	const { generalHttp } = useApi()

	useEffect(() => {
		const fetchData = async () => {
			const [err, data] = await generalHttp("/proxy/level/nameList", undefined)

			if (!err) {
				setDataResponse(data as any[])
			}
		}
		fetchData()
	}, [])

	const options = dataResponse.map(item => ({
		value: item.id,
		label: `${item.id}/${formatMessage({ id: item.levelName })}`
	}))

	return (
		<SFormItem name="proxyLevel" rules={rules} {...labelProps} label={`${formatMessage({ id: "agent.agent_level" })}/名称`}>
			<StyleSelect
				placeholder={formatMessage({ id: "label.select_all" })}
				allowClear
				options={options}
				disable={disable}
				{...selectorProps}
			/>
		</SFormItem>
	)
}
